<template>
  <vuescroll :class="[`${classPrefix}`]" :ops="options" ref="vuescroll">
    <slot></slot>
  </vuescroll>
</template>

<script>
import Config from "/src/config";
import vuescroll from "vuescroll";

export default {
  name: "Scroll",
  props: {
    size: String,
    scrollOption: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      classPrefix: Config.classPrefix + "-scroll",
      ops: {
        vuescroll: {
          mode: "native",
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollContentl: {
          initialScrollY: false, // 只要组件mounted之后自动滚动的距离
          initialScrollX: false,
          scrollingX: true, // 是否启用 x 或者 y 方向上的滚动
          scrollingY: true,
          speed: 300,
          easing: undefined,
          verticalNativeBarPos: "right",
        },
        rail: {
          background: "#cecece", // 轨道的背景色
          opacity: 0, // 轨道的透明度
          size: "6px", // 轨道的尺寸
          specifyBorderRadius: false, // 是否指定轨道的 borderRadius， 如果不那么将会自动设置
          gutterOfEnds: null, // 轨道距 x 和 y 轴两端的距离
          gutterOfSide: "1px", // 距离容器的距离
          keepShow: false, // 是否即使 bar 不存在的情况下也保持显示
        },
        bar: {
          showDelay: 500, // 在鼠标离开容器后多长时间隐藏滚动条
          onlyShowBarOnScroll: true, // 是否只在滚动时显示 bar
          keepShow: false, // 滚动条是否保持显示
          background: "#c1c1c1", // 滚动条背景色
          opacity: 1, // 滚动条透明度
          hoverStyle: false,
          specifyBorderRadius: false, // 是否指定滚动条的 borderRadius， 如果不那么和轨道的保持一致
          minSize: false,
          size: "6px",
          disable: false, // 是否禁用滚动条
        },
      },
    };
  },
  computed: {
    options() {
      const ops = JSON.parse(JSON.stringify(this.ops));
      if (this.size === "small") {
        ops.bar.size = "4px";
      }
      Object.keys(this.scrollOption).forEach((key) => {
        Object.keys(this.scrollOption[key]).forEach((_key) => {
          ops[key][_key] = this.scrollOption[key][_key];
        });
      });
      return Object.assign({}, ops);
    },
  },
  components: {
    vuescroll,
  },
  methods: {
    scrollTo(position, speed = 500) {
      this.$refs.vuescroll.scrollTo(position, speed);
    },
  },
};
</script>
